<template>
  <div class="vip">
    <el-table
        :data="
        tableData.filter(
          (data) =>
            !search || data.nickname.toLowerCase().includes(search.toLowerCase())
        )"
        style="width: 100%"
      >

      <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column
          prop="nickname"
          label="会员名"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="会员姓名"
          width="100"
        ></el-table-column>
        <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="role"
        label="角色">
      </el-table-column>
       <el-table-column
        prop="address"
        label="地址">
      </el-table-column>

      <el-table-column align="right">
          <template slot="header">
            <el-input v-model="search" size="mini" placeholder="输入用户昵称搜索您想要的东西" />
          </template>
        </el-table-column>

    </el-table>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      nickname:'',
      username:'',
      phone:'',
      role:'',
      address:'',
      currentPage: 1,
      pageSize:10,
      total:0,
      search: '',
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },
      // 页面初始化
      load(){ 
       this.request.get("/user/page", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          nickname:this.search
        }
      }).then(res => {

       let data = res.data.data
       this.tableData = data.records;
       console.log(">><<<><><",this.tableData)
       this.pageSize = data.size
       this.currentPage = data.current
       this.total = data.total
       this.pages = data.pages

      })

    },

  },
  created() {
    this.load()
  },
  mounted() {}
};
</script>
<style scoped>
.vip{
}
.block {
  float: right;
  margin-top: 15px;
}
</style>